<template>
	<view class="content ba_img" :style="{
		'padding-top':height+'px'
	}">
		<view :style="{
			'height':statusBarHeight+'px' 
		}">

		</view>
		<view class="head" :style="{
			'top':statusBarHeight+'px'
		}">
			<view class="head_left">
				<u-icon name="arrow-left" color="#eeeeee" size="24" :bold="true" @click="toBack"></u-icon>
			</view>
			<view class="text">星河</view>
			
		</view>
		<view class="box1">
			<view class="inp">
				 <u--input
				    placeholder="搜索感兴趣的问题"
				    border="none"
					placeholderStyle="font-size:30rpx;color:#ADADAD;"
					prefixIcon="search"
					prefixIconStyle="font-size: 42rpx;color: #ADADAD"
					color="#ADADAD"
				    v-model="value"
				    @change="change"
					inputAlign="left"
				  ></u--input>
			</view>
			<view class="tabs">
				<view>
					按主题
				</view>
				<view>
					按上架时间
				</view>
				<view>
					按热度
				</view>
			</view>
			
			<view class="find">
				<view class="find_left">
					发现星球
				</view>
				<view class="find_right">
					更多<u-icon name="arrow-right" size="16" color="#ADADAD"></u-icon>
				</view>
			</view>
			
			<starList :isWhite="true"></starList>
		</view>


		
		
	</view>
</template>

<script>
	// import starList from './components/starList.vue'
	import starList from '@/components/starList.vue';//星河
	export default {
		data() {
			return {
				statusBarHeight: 0,
				height: 0,
				value:''
			}
		},
		components:{
			starList
		},
		created() {
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度


			this.statusBarHeight = statusBarHeight.statusBarHeight;
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.head').boundingClientRect(data => {
					this.height = data.height;
				}).exec()
			});
		},
		methods: {
			change(e) {
				
			},
			toBack() {
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.ba_img {
		margin: 0;
		background: url("/static/images/index.png") no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
	}

	.head {
		width: 100%;
		padding: 18rpx 0 47rpx;
		position: fixed;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99;

		.head_left {
			position: absolute;
			left: 30rpx;

		}
		.text {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #eeeeee;
		}
	}
	.box1 {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.box1 {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		.inp {
			width: 100%;
			height: 80rpx;
			background: rgba(39,44,41,0.5);
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			margin-top: 32rpx;
		}
		.tabs {
			width: 100%;
			display: flex;
			margin-top: 32rpx;
			view {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #ADADAD;
				padding: 7rpx 30rpx;
				border-radius: 32rpx;
				margin-right: 16rpx;
				background: rgba(39,39,39,0.5);

			}
		}
		.find {
			width: 100%;
			height: 106rpx;
			background: rgba(39,39,39,0.5);
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;
			margin-top: 40rpx;
			.find_left {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #EEEEEE;
			}
			.find_right{
				display: flex;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #ADADAD;
			}
		}
	}
	
</style>